<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="650px"
      @closed="closed"
    >
    <el-form ref="signalingForm"  :model="signalingForm" label-width="110px" :rules="rules" style="padding: 20px;">
      <el-row :gutter="24" style="margin-top 10px; ;">
        <el-col :span="14">
          <el-form-item label="信令外网IP" prop="ip">
            <el-input v-model="signalingForm.ip" placeholder="请输入外网IP" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="信令内网IP" prop="innerIp">
            <el-input v-model="signalingForm.innerIp" placeholder="请输入内网IP" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="信令SSL Key" prop="sslKeyAbsolutePath">
            <el-input v-model="signalingForm.sslKeyAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="信令SSL Cert" prop="sslCertAbsolutePath">
            <el-input v-model="signalingForm.sslCertAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">
          <el-form-item label="外网信令端口" prop="port">
            <el-input v-model="signalingForm.port" placeholder="请输入外网端口" autocomplete="off" ></el-input>
          </el-form-item>

          <el-form-item label="内网信令端口" prop="innerPort">
            <el-input v-model="signalingForm.innerPort" placeholder="请输入内网端口" autocomplete="off" ></el-input>
          </el-form-item>

          <el-form-item label="启用SSL">
            <el-switch
              v-model="signalingForm.sslEnable"
              active-value="1"
              inactive-value="0"
              >
            </el-switch>
          </el-form-item>

          <el-form-item label="自动启动">
            <el-switch
              v-model="signalingForm.enabled"
              active-value="1"
              inactive-value="0"
              >
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;" slot="footer" class="dialog-footer">
      <el-button @click="closed" :loading="loading">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveServer,
    getServerById
  } from '@/api/cloud/server'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'SignalingDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.terminal) {
            this.terminal.ip = value.terminal.ip
            this.terminal.port = value.terminal.port
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.getSignalingInfo();
    },
    data(){
      return {
        visible:false,
        title:'信令服务配置',
        loading:false,
        terminal:{
          ip:'',
          port:''
        },
        signalingForm:{
          ip:"",
          port:"",
          innerIp:"",
          innerPort:"",
          sslEnable:"0",
          sslKeyAbsolutePath:'',
          sslCertAbsolutePath:"",
        },
        rules: {
          ip: [{
            required: true,
            message: '请输入外网IP',
            trigger: 'blur'
          }],
          port: [{
            required: true,
            message: '请输入内网IP',
            trigger: 'blur'
          }],
          innerIp: [{
            required: true,
            message: '请输入外网端口',
            trigger: 'blur'
          }],
          innerPort: [{
            required: true,
            message: '请输入内网端口',
            trigger: 'blur'
          }]
        }
      }
    },
    methods:{
      getSignalingInfo(){
        this.loading=true
        fetch(`http://${this.terminal.ip}:${this.terminal.port}/Renderers/Any/Signalling/info`, {
            method: "POST",
            headers: { "Content-type": "application/json" },
        }).then(res => {
          if (!res.ok) { throw Error(res.statusText) }
          return res.json()
        }).then(json => {
          if(json.code==200 && json.result){
            this.signalingForm.ip=json.result.ip || ''
            this.signalingForm.port=json.result.port || ''
            this.signalingForm.innerIp=json.result.innerIp || ''
            this.signalingForm.innerPort=json.result.innerPort || ''
            this.signalingForm.sslEnable=json.result.sslEnable || ''
            this.signalingForm.sslKeyAbsolutePath=json.result.sslKeyAbsolutePath || ''
            this.signalingForm.sslCertAbsolutePath=json.result.sslCertAbsolutePath || ''
          }else{
            this.signalingForm.ip=''
            this.signalingForm.port=''
            this.signalingForm.innerIp=''
            this.signalingForm.innerPort=''
            this.signalingForm.sslEnable=''
            this.signalingForm.sslKeyAbsolutePath=''
            this.signalingForm.sslCertAbsolutePath=''
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message:error
          })
        }).finally(() => {
          this.loading = false
        });
      },
      submitForm: function() {
        this.$refs.signalingForm.validate((valid) => {
          if (valid) {
            this.loading=true
            fetch(`http://${this.terminal.ip}:${this.terminal.port}/Renderers/Any/Signalling/update`, {
                method: "POST",
                headers: { "Content-type": "application/json" },
                body: JSON.stringify({
                  ip:this.signalingForm.ip,
                  port:this.signalingForm.port,
                  innerIp:this.signalingForm.innerIp,
                  innerPort:this.signalingForm.innerPort,
                  sslEnable:this.signalingForm.sslEnable,
                  sslKeyAbsolutePath:this.signalingForm.sslKeyAbsolutePath,
                  sslCertAbsolutePath:this.signalingForm.sslCertAbsolutePath
                })
            }).then(res => {
              if (!res.ok) { throw Error(res.statusText) }
              return res.json()
            }).then(json => {
              if(json.code==200){
                this.$message({
                  type: 'message',
                  message:json.message
                })
              }else{
                this.$message({
                  type: 'error',
                  message:json.message
                })
              }
            }).catch((error) => {
              this.$message({
                type: 'error',
                message:error
              })
            }).finally(() => {
              this.loading = false
            });

          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
